<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>2019年平台消防年报</title>
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="Copyright" content="">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">

    <!-- 禁用链接高亮 -->
    <meta name="theme-color" content="#2196f3">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        li {
            list-style: none;
        }

        .yearReportTitle {
            flex: 1;
        }

        .font30 {
            font-size: 30px;
            font-weight: bold;
        }

        .font16 {
            font-size: 16px;

            line-height: 32px;
        }

        .font12 {
            font-size: 12px;
        }

        .font14 {
            font-size: 14px;

        }

        .font18 {
            font-size: 18px;
        }

        .font20 {
            font-size: 20px;
        }

        .font50 {
            font-size: 50px;
        }

        .font40 {
            font-size: 40px;
            font-weight: bold;
        }

        .font24 {
            font-size: 24px;

        }

        .opacityColor {
            opacity: .6;
        }

        .text-c {
            text-align: center;
        }

        .text-l {
            text-align: left;
        }

        .text-r {
            text-align: right;
        }

        .colorYellow {
            color: #FFEAAE;
            line-height: 28px;
        }

        .yearReport .link-page-nav {
            background-color: #B14A48;
            display: flex;
            align-items: center;
            height: 38px;
        }

        .yearReport .link-page-nav span {
            text-align: center;
            color: #ffffff;
            font-size: 20px;
            text-indent: -45px;
        }

        .yearReport .page-inner {
            transition: transform 0.5s;
        }

        .yearReport .page-content {
            background-color: #CC4744;
            height: 100vh;
            background-image: url(/ilink-app-h5-zd/static/img/ilink_1578621454168.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            overflow: hidden;
        }

        .slide-page {
            position: relative;
            min-height: 500px;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            height: 100vh;
            /* border: 1px solid blue; */
        }

        .page_1 {
            text-align: center;
        }

        .page_btn {
            
            color: #FFEAAE;
            font-size: 16px;
            animation-fill-mode: forwards;
            text-align: right;
        }
        .twinkle{
            animation:fadeInLeft 1s infinite ease-in-out;
        }
        .page_1_2 {
            width: 90%;
        }

        .page_btn_box {
            position: absolute;
            right: 28px;
            bottom: 60px;

        }

        /*从左到右进入*/
        @keyframes fadeInLeft {
            from{
                 opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .page_1 .startContentBg {
            width: 38%;
            margin-top: 50px;
            margin-bottom: 10px;
        }

        .page_1_contentBg {
            width: 100%;
            margin-top: 35px;
        }

        .page_2 .startContentBg {
            margin-left: 10%;
            margin-top: 0px;
        }



        @keyframes jiggle {

            48%,
            62% {
                transform: scale(1.0, 1.0)
            }

            50% {
                transform: scale(1.1, 0.9)
            }

            56% {
                transform: scale(0.9, 1.1) translate(0, -5px)
            }

            59% {
                transform: scale(1.0, 1.0) translate(0, -3px)
            }
        }

        .page_2_content {
            padding: 15px 0;
            color: #ffffff;
        }

        .page_2_content .page_2_flex {
            margin-top: 20px;
            display: flex;
            align-items: baseline;
            justify-content: flex-start;
            font-size: 30px;
            color: #ffffff;
            font-weight: bold;
        }

        .page_2_content p:nth-child(4) {
            text-align: left;
            margin-top: 20px;
            ;
        }

        .to__led-number {
            display: inline-block;
        }

        .slideIcon {
            animation: slide 1s infinite;
            width: 28px;
            display: none;
            position: absolute;
            left: 50%;
            margin-left: -14px;
            bottom: 70px;
            z-index: 9;
        }

        @keyframes slide {
            0% {
                transform: translate(0px, 0px);
            }

            50% {
                transform: translate(0px, -10px);
            }

            100% {
                transform: translate(0px, 0px);
            }
        }

        /* page3 */
        .page_2,
        .page_3,
        .page_4,
        .page_6,
        .page_5,
        .page_7,
        .page_8,
        .page_9,
        .page_10,
        .page_11,
        .page_12 {
            color: #ffffff;
            padding: 0 10%;
            padding-top: 40px;
            overflow: hidden;
        }

        .page_2_contentBg {
            width: 65%;
            position: absolute;
            bottom: 15px;
            right: 10%;

        }

        .page_3_ContentBg {
            width: 65%;
            position: absolute;
            bottom: 66px;
            right: 10%;

        }

        .flex-start {
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }

        /* 柱状图动画 */



        .page_6_img_1 {
            width: 120px;
            margin-top: 60px;
            margin-left: 60px;
            position: absolute;
            z-index: 2;


        }

        .page_6_img_2 {
            width: 240px;
            position: absolute;
            top: 0;
            right: 0;
            animation: turn 4s linear infinite;

        }

        @media screen and (width: 320px) {
            .page_6_img {
                width: 195px;
                height: 195px;
            }

            .page_6_img_1 {
                width: 98px;
                margin-top: 60px;
                margin-left: 60px;
            }

            .page_6_img_2 {
                width: 195px;
                position: absolute;
                top: 0;
                right: 0;
            }

            .font30 {
                font-size: 28px;
                font-weight: bold;
            }

            .font16 {
                font-size: 14px;
                ;
                line-height: 32px;
            }

            .font14 {
                font-size: 12px;
                ;
            }

            .font18 {
                font-size: 16px;
            }

            .font24 {
                font-size: 22px;
            }
        }

        @keyframes turn {
            0% {
                -webkit-transform: rotate(0deg);
            }

            25% {
                -webkit-transform: rotate(90deg);
            }

            50% {
                -webkit-transform: rotate(180deg);
            }

            75% {
                -webkit-transform: rotate(270deg);
            }

            100% {
                -webkit-transform: rotate(360deg);
            }
        }

        .page_7_head {
            position: relative;
            width: 119px;
            margin: 40px auto 10px auto;
        }

        .page_7_head .icon-logo {
            position: absolute;
            top: -35px;
            right: 0;
            width: 55px;
            height: 55px;
        }

        .page_7_head .icon-head {
            width: 119px;
            height: 119px;
            border-radius: 50%;
            border: 1px solid #f34c49;
        }

        #page_7_content {
            display: none;
        }

        .page_8_icon {
            margin-top: 30px;
            display: flex;
            justify-content: space-between;
        }

        .page_8_icon div:nth-child(1) {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background-color: #93CF70;
            line-height: 64px;
            animation: textOpacity 5s infinite alternate;
            font-size: 24px;
            margin-top: 40px;
        }

        .page_8_maintenance_img {
            width: 120px;
            position: absolute;
            top: 40px;
            right: 10%;
        }

        .page_8_icon div:nth-child(2) {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background-color: #F6AF13;
            line-height: 44px;
            animation: textOpacity 5s 1s infinite alternate;
            font-size: 16px;
        }

        .page_8_icon div:nth-child(3) {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #F06F6F;
            line-height: 50px;
            animation: textOpacity 5s 2s infinite alternate;
            font-size: 18px;
            margin-top: 30px;
        }

        .page_8_icon div:nth-child(4) {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background-color: #619EFF;
            line-height: 34px;
            animation: textOpacity 5s 1s infinite alternate;
            font-size: 12px;
            margin-top: 20px;
        }

        @keyframes textOpacity {
            0% {
                opacity: 0;
            }

            25% {
                opacity: 0.3;
            }

            50% {
                opacity: 0.5;
            }

            75% {
                opacity: 0.8;
            }

            100% {
                opacity: 1;
            }
        }

        .page_9_words {
            position: relative;
            background: #F06665;
            border: 1px solid #FCCD62;
            /* padding-top: 76%; */
            margin-bottom: 25px;
        }

        .page_9_words img {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
        }

        .page_9_top {
            position: relative;
            padding-top: 20px;
            width: 100%;
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
        }

        .page_9_rankingImg {
            width: 100%;
        }

        .page_9_ranking_1,
        .page_9_ranking_2,
        .page_9_ranking_3 {
            width: 30%;
            text-align: center;
        }

        .page_9_ranking_2,
        .page_9_ranking_3 {
            bottom: 100px;
        }

        .page_9_ranking_1 {
            bottom: 120px;
            left: 33.3%;
        }

        .page_9_ranking_3 {
            bottom: 80px;
            left: 66.6%;
        }

        .page_9_ranking_1 .rankingBg,
        .page_9_ranking_2 .rankingBg,
        .page_9_ranking_3 .rankingBg {
            width: 100%;

        }

        .page_9_top .company_logo {
            width: 44px;
            height: 44px;
            border-radius: 50%;
        }

        .page_9_words img:nth-child(1) {
            animation: textOpacity 2s infinite alternate;
        }

        .page_9_words img:nth-child(2) {
            animation: textOpacity 2s 2s infinite alternate;
        }

        .page_9_words img:nth-child(3) {
            animation: textOpacity 2s 3s infinite alternate;
        }

        .page_9_words_title {
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            padding: 40px 0 10px 0;
        }

        .sharePageBtn {
            width: 160px;
            margin-top: 20px;
            animation: jiggle 2s ease-in infinite;
        }

        .page_12_content {
            position: relative;
        }

        .page_12_title {

            text-align: center;
        }

        .rankingList li {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 15px 0;
        }

        .rankingList li img {
            width: 34px;
            height: 34px;
            border-radius: 50%;
        }

        .rankingListImgBox {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            margin: 0 10px;
            background-color: #FFEAAE;
            text-align: center;
            line-height: 34px;
        }

        .animationFireworks1 {
            animation: fireworks 2s 1s infinite;
        }

        .animationFireworks2 {
            animation: fireworks 3s 2s infinite;
        }

        .animationFireworks3 {
            animation: fireworks 4s 3s infinite;
        }

        #animationFireworks1 {
            position: absolute;
            left: 0;
            top: 10px;
            width: 300px;
            transform: scale(0);
            z-index: 5;
            pointer-events: none;
        }

        #animationFireworks2 {
            position: absolute;
            left: 40px;
            top: 0;
            width: 300px;
            transform: scale(0);
            z-index: 5;
            pointer-events: none;
        }

        #animationFireworks3 {
            position: absolute;
            right: 100px;
            top: -30px;
            width: 100%;
            transform: scale(0);
            z-index: 5;
            pointer-events: none;
        }

        @keyframes fireworks {
            0% {
                transform: scale(0);
            }

            80% {
                transform: scale(1.5);
            }

            100% {
                opacity: 0;
            }
        }

        .yearReportline {
            width: 50px;
            border-bottom: 1px solid rgb(235, 195, 195, 0.6);
            position: absolute;
            margin-top: 80px;
            margin-left: calc(40% + 5px);
            z-index: 1;
        }

        .yearReportText {
            z-index: 1;
            position: absolute;
            left: 50%; 
            top: calc(50% - 10px);
            text-indent: 10px;
            color: rgb(235, 195, 195, 0.6);
            font-size: 12px;
        }

        .hideimg {
            display: none;
        }

        .textFadeIn {
            opacity: 0;
            /*实先规定文字的状态是不显示的*/
            animation: fade-in 1s linear;
            animation-fill-mode: forwards;
        }

        @keyframes fade-in {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .absoluteText {
            color: rgba(138, 18, 16, .5);
            position: absolute;
            width: 100%;
            left: 0;
            bottom: 0;
            bottom: env(safe-area-inset-bottom);
            bottom: constant(safe-area-inset-bottom);
            z-index: 8;
            background: rgba(0, 0, 0, .5);
            background: rgba(204, 71, 68, .7);
            height: 40px;
            line-height: 40px;
        }

        .pieDescript {
            margin-left: 8px;
            margin-top: 0px;
        }

        .pieTitle {
            margin-left: 10px;
            float: left;
            width: 12px;
            height: 12px;
            margin-top: 3px;
        }

        .playAudio {
            position: fixed;
            right: 5%;
            top: 40px;
            width: 34px;
            height: 34px;
            z-index: 9;
        }

        .audioPlayStatus {
            animation: animationRotate 6s 1s linear infinite;
        }

        @keyframes animationRotate {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body style="height: 100%; ">
    <div class="page yearReport" data-page="yearReport" style="z-index: 2;">

        <div class="page-content page-box">
            <img src="/ilink-app-h5-zd/static/img/ilink_1578395699904.png" alt="" class="slideIcon" onclick="setActive()">
            <img src="/ilink-app-h5-zd/static/img/ilink_1578635133524.png" class="playAudio"
                onclick="playAudio()">
            <audio src="/ilink-app-h5-zd/static/img/ilink_1578636140500.mp3" loop autoplay style="display: none;"
                id="playAudio">

            </audio>
            <div class="page-inner">
                <div class="section slide-page page_1">
                    <img src="/ilink-app-h5-zd/static/img/ilink_1578376357066.png" class="startContentBg">
                    <img src="/ilink-app-h5-zd/static/img/ilink_1578376383074.png" class="page_1_2">
                    <img src="/ilink-app-h5-zd/static/img/ilink_1578385450201.png" class="page_1_contentBg">
                    <div class="page_btn_box">
                        <div onclick="startFun()" class="page_btn"><span id="startOrgName"></span><span class="twinkle">>></span></div>
                    </div>
                </div>
                <div class="section slide-page page_2">
                    <div class="font24 colorYellow" id="page_2_platName">

                    </div>
                    <div class="page_2_content">
                        <p class="font20">已加入智慧易消防</p>
                        <div class="page_2_flex" style="justify-content: flex-start;"> <span id="page_2_times"
                                class="emptyDom font40 " style="display: inline-block;"></span><span id="company_1"
                                class="font16">小时</span>
                        </div>
                        <p class="font16 opacityColor" id="page_2_timeDay">共计365天</p>
                        <p class="font20">2019年我们为您积累了</p>
                        <div class="page_2_flex"> <span id="page_2_nums" class="emptyDom font40"
                                style="display: inline-block;"></span><span class="font16">数据</span></div>
                        <img src="/ilink-app-h5-zd/static/img/ilink_1578383633430.png" class="page_2_contentBg">

                    </div>
                </div>
                <div class="section slide-page page_3">
                    <div class="font24 colorYellow">
                        监管业主单位
                    </div>
                    <div style="padding-top: 20px;">
                        <div class=" font20">截止到过去一年，共监管单位</div>
                        <div class="flex-start" style="align-items: baseline;margin-top: 20px;">
                            <div id="page_3_times" class="emptyDom font40"></div>
                            <div class="font16">家</div>
                        </div>

                    </div>

                    <img src="/ilink-app-h5-zd/static/img/ilink_1578385961642.png" alt="" class="page_3_ContentBg">
                </div>
                <div class="section slide-page page_4">
                    <div class="font24 colorYellow">
                        接入消防设施
                    </div>
                    <div style="padding-top: 20px;">
                        <div class=" font20">合计接入消防设施</div>
                        <div class="flex-start" style="align-items: baseline;margin-top: 20px;">

                            <div id="page_4_times_dom" class="emptyDom font40"></div>
                            <div class="font16">个</div>
                        </div>
                    </div>
                    <!-- 饼图 -->
                    <div id="page_4" style="position: relative;">
                        <!-- line start -->
                        <div class="yearReportText pieNum" style="margin-top: -100px;"></div>
                        <div class="yearReportText pieNum" style="margin-top: -80px;"></div>
                        <div class="yearReportText pieNum" style="margin-top: -60px;"></div>
                        <div class="yearReportText pieNum" style="margin-top: -40px;"></div>
                        <div class="yearReportText pieNum" style="margin-top: -20px;"></div>
                        <!-- line end -->
                        <div id="page_4_category" style="width:100%;height:100%;margin-top: 20px;"></div>
                    </div>
                    <!-- legent 菜单栏 -->
                    <div style="float: left;margin-top: -40px; margin-left: calc(50% - 130px);word-wrap:break-word;padding: 5px;">
                        <div class="pieTitle" style="background-color:#FFD986;"></div>
                        <div class="pieName pieDescript" style="float: left; font-size: 12px;"></div>
                        <div style="float: left;">
                            <div class="pieTitle" style="background-color:#7DA5E6;"></div>
                            <div class="pieName pieDescript" style="float: left;font-size: 12px;"></div>
                        </div>
                        <div style="float: left;">
                            <div class="pieTitle" style="background-color:#B2CBE6;"></div>
                            <div class="pieName pieDescript" style="float: left;font-size: 12px;"></div>
                        </div>
                        <div style="float: left;">
                            <div class="pieTitle" style="background-color:#FF7878;"></div>
                            <div class="pieName pieDescript" style="float: left;font-size: 12px;"></div>
                        </div>
                        <div style="float: left;">
                            <div class="pieTitle" style="background-color:#EBF3F8;"></div>
                            <div class="pieName pieDescript" style="float: left;font-size: 12px;"></div>
                        </div>
                    </div>

                </div>
                <div class="section slide-page page_5">
                    <div class="font24 colorYellow pad40">
                        火灾高危信号
                    </div>
                    <div style="padding-top:20px;color: #ffffff;">
                        <div class=" font20">过去一年的高危信号共有</div>
                        <div class="flex-start" style="align-items: baseline;margin-top: 20px;">
                            <div id="page_5_times_dom" class="emptyDom font40"></div>
                            <div>个</div>
                        </div>
                    </div>


                    <!-- 高危信号 start -->
                    <div
                        style="width: 15px;height: 3px;background-color:#FD7676;position: absolute;margin-top: 80px;margin-left: calc(50% - 115px);">
                    </div>
                    <div style="position: absolute;margin-top: 73px;margin-left: calc(50% - 95px);font-size: 12px;">最大值
                    </div>
                    <div
                        style="width: 15px;height: 3px;background-color:#7DA5E6;position: absolute;margin-top: 80px;margin-left: calc(50% - 10px);">
                    </div>
                    <div style="position: absolute;margin-top: 73px;margin-left: calc(50% - -10px);font-size: 12px;">最小值
                    </div>
                    <!-- 高危信号 end -->


                    <div style="position: relative;" id="page_5">
                        <div id="page_5_category" style="width:100%;height:100%;margin-top: 30px;"></div>
                    </div>
                </div>
                <div class="section slide-page page_6">
                    <div class="font24 colorYellow">
                        重大问题
                    </div>
                    <div style="padding-top: 20px;">
                        <div class=" font20">全年重大问题共</div>
                        <div class="flex-start" style="align-items: baseline;margin-top: 20px;">
                            <div id="page_6_times_dom" class="emptyDom font40"></div>
                            <div>个</div>
                        </div>
                        <!-- <div class=" font20 opacityColor">其中，“某某某”被提及了88次</div> -->
                        <!-- 重大问题 start -->
                        <div
                            style="width: 15px;height: 3px;background-color:#FD7676;position: absolute;margin-top: 80px;margin-left: calc(50% - 115px);">
                        </div>
                        <div style="position: absolute;margin-top: 73px;margin-left: calc(50% - 95px);font-size: 12px;">
                            最大值</div>
                        <div
                            style="width: 15px;height: 3px;background-color:#7DA5E6;position: absolute;margin-top: 80px;margin-left: calc(50% - 10px);">
                        </div>
                        <div
                            style="position: absolute;margin-top: 73px;margin-left: calc(50% - -10px);font-size: 12px;">
                            最小值</div>
                        <!-- 重大问题 end -->
                    </div>
                    <div style="position: relative;" id="page_6">
                    <div id="page_6_category" style="width:100%;height:100%;margin-top: 30px;"></div>
                    </div>
                </div>
                <div class="section slide-page page_7">
                    <div class="font24 colorYellow">
                        隐患
                    </div>
                    <div style="padding-top: 20px;">
                        <div class=" font20">全年共消灭隐患</div>
                        <div class="flex-start" style="align-items: baseline;margin-top: 20px;">
                            <div id="page_7_times_dom" class="emptyDom font40"></div>
                            <div>个</div>
                        </div>
                        <div class=" font20 opacityColor" id="page_7_des">平均每3.8小时处理一个隐患</div>
                        <div class="page_9_words_title">隐患关键词</div>
                        <div class="page_9_words">
                            <div id="hotWorld_police" style="width:100%;height:200px"></div>
                        </div>
                    </div>
                </div>
                <div class="section slide-page page_8">
                    <div class="font24 colorYellow">
                        维保
                    </div>
                    <div style="padding-top: 20px;">
                        <div class=" font20">全年共完成任务</div>
                        <div class="flex-start" style="align-items: baseline;margin-top: 20px;">
                            <div id="page_8_times_dom" class="emptyDom font40"></div>
                            <div>个</div>
                        </div>
                    </div>
                    <div id="page_8">

                   
                    <div id="page_8_radar" style="width:100%;height:100%;margin-top: 30px;"></div>
                </div>
                    <img src="/ilink-app-h5-zd/static/img/ilink_1578460662248.png" alt="" class="page_8_maintenance_img">
                </div>
                <div class="section slide-page page_9">
                    <div class="font24 colorYellow">
                        安全单位Top
                    </div>
                    <div>
                        <div class="page_9_top" id="page_9_safe">

                        </div>
                        <div>
                            <ul class="rankingList" id="rankingListSafe">

                            </ul>
                        </div>
                        <div class="font12 text-c absoluteText">以平均安全指数为依据</div>
                    </div>

                </div>

                <div class="section slide-page page_10">
                    <div class="font24 colorYellow">
                        勤恳单位Top
                    </div>
                    <div>
                        <div class="page_9_top" id="page_10_diligent">

                        </div>
                        <div>
                            <ul class="rankingList" id="rankingListDiligent">

                            </ul>
                        </div>
                        <div class="font12 text-c absoluteText">以日常巡检完成度为依据</div>
                    </div>
                    <div class="font16 colorYellow" id="page_9_text"></div>

                </div>
                <div class="section slide-page page_11">
                    <div class="font24 colorYellow">
                        高效单位Top
                    </div>
                    <div>
                        <div class="page_9_top" id="page_11_highEffciency">

                        </div>
                        <div>
                            <ul class="rankingList" id="rankingListEfficiency">

                            </ul>
                        </div>
                        <div class="font12 text-c absoluteText">以警情处理速度为依据</div>
                    </div>
                    <div class="font16 colorYellow" id="page_9_text"></div>
                </div>

                <div class="section slide-page page_12" style="padding: 0;">
                    <div class="page_12_content text-c">
                        <img src="/ilink-app-h5-zd/static/img/ilink_1578472624028.png" id="animationFireworks1">
                        <img src="/ilink-app-h5-zd/static/img/ilink_1578472641023.png" id="animationFireworks2">
                        <img src="/ilink-app-h5-zd/static/img/ilink_1578472652631.png" id="animationFireworks3">
                        <div class="font50 page_12_title" id="lastLogoTitle">
                            <img src="/ilink-app-h5-zd/static/img/ilink_1578477213362.png" alt="" style="width:250px">
                        </div>
                        <div class="font20 page_12_text" id="orgNameDes">我们与您携手共进<br>共同守护城市消防安全</div>
                    </div>
                    <div class="text-c"><img src="/ilink-app-h5-zd/static/img/ilink_1577975180851.png" onclick="shareFun()"
                            class="sharePageBtn"></div>
                    <img src="/ilink-app-h5-zd/static/img/ilink_1578477607666.png" alt=""
                        style="width:172px;position:absolute;right:0;bottom:40px">
                </div>
            </div>
        </div>
    </div>
</body>
<!-- 设置配置文件 -->
<script src="/ilink-fe-config/zhxf-app/config.js?v=202005151646"></script>
<!-- jquery-3.3.1.min.js  -->
<script src="/ilink-app-h5-zd/static/js/rdspFile_1559652823179.js"></script>
<!-- echarts -->
<script src="/ilink-app-h5-zd/static/js/rdspFile_1559652961780.js "></script>
<!-- echarts词云 必须后于echarts引入-->
<script src="/ilink-app-h5-zd/static/img/ilink_1578294306870.js">
</script>
<!-- 语音播报插件 -->
<script src="/ilink-app-h5-zd/static/img/ilink_1577974670913.js">
</script>
<script>
    //如果是给pc端嵌入
    if (!/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent) && !/(Android)/i.test(navigator.userAgent)) {
        $('.sharePageBtn').hide()
    }
    
	//接口上下文路径
	var contextPath = CONFIGBOX[CONFIGKEY].proxy;
    var touchStart = 0,//触屏起点
        active = 0,//page index
        maxMove = 50,//偏移最大距离
        textNum = 0,//文字大话index
        orgName,
        safeData,
        highEfficiencyData,
        diligentData,
        page_2_animation_text = '',
        page_3_animation_text = '安全踏实是最值得托付的陪伴，在新的一年每一天都能享受他的陪伴。',
        page_4_animation_text = '每一次的运行数据都会详细记录，</br>每一次的报警都会及时推送。',
        page_5_animation_text = '每一次更及时的处理，都是为了早发现、早到场、早处理。新的一年，我们更早!',
        page_6_animation_text = '定期安排维保任务，可以更有效地保障单位安全!',
        page_7_animation_text = '日积月累、持之以恒的完成日常巡检换来的是防微杜渐、灭隐患于初始。',
        page_8_animation_text = '',
        page_9_animation_text = '比52%的单位都要更快！',
        page_10_animation_text = '好好学习，认真工作；守卫安全，快乐生活！'
    var pageItem = document.getElementsByClassName('slide-page') //3
    var pageBox = document.getElementsByClassName('page-box') //1
    var pageInner = document.getElementsByClassName('page-inner') //2
    var height, headUrl, inspectPersonName, pointCount, total, maxIndex, minIndex, wordsData, pieData, page_5_category, page_6_category, page_8_radarData, rarDarData;
    var wordsDataConcat = []
    $(window).resize(function () {
        if (window != top) {
            var u = navigator.userAgent;
            if (u.indexOf("iPhone") > -1 || u.indexOf("iOS") > -1) {
                height = Number(window.screen.availHeight - 43)
            }else{
                height = Number(document.documentElement.clientHeight)
            }
        } else {
            height = Number(document.documentElement.clientHeight)
        }
        Array.prototype.forEach.call(pageItem, (element, i) => {
            element.style = 'height:' + height + 'px';
        })
        jQuery('.page-box').css({ 'height': height })
    });
    if (window != top) {
        var u = navigator.userAgent;
        if (u.indexOf("iPhone") > -1 || u.indexOf("iOS") > -1) {
            height = Number(window.screen.availHeight - 43)
        }else{
            height = Number(document.documentElement.clientHeight-43)
        }
    } else {
        height = Number(document.documentElement.clientHeight)
    }

    var page_2_1_nums, page_3_nums, page_3_1_nums, page_3_2_nums, page_4_nums, page_5_nums, page_6_nums, page_6_1_nums, page_6_2_nums, page_6_3_nums, page_6_4_nums, page_7_nums, page_8_nums, page_9_nums
        , page_10_1_nums, page_10_2_nums
    Array.prototype.forEach.call(pageItem, (element, i) => {
        element.style = 'height:' + height + 'px';
    })
    jQuery('.page-box').css({ 'height': height })
    pageBox[0].addEventListener('touchstart', function (e) {
        touchStart = e.changedTouches[0].clientY
        if (active > 0) { //首页关闭滑动事件
            this.addEventListener('touchmove', touchmovehandle, false)
            this.addEventListener('touchend', touchendhandle, false)
        }
    }, false)
    getDetail()
    var u = navigator.userAgent;
    if (u.indexOf("iPhone") > -1 || u.indexOf("iOS") > -1) {
    }else{
        jQuery('.playAudio').addClass('audioPlayStatus')
    }
    function playAudio() {
        let media = document.querySelector('#playAudio')
        if (media.paused) {
            jQuery('.playAudio').attr('src', '/ilink-app-h5-zd/static/img/ilink_1578635133524.png')
            jQuery('.playAudio').addClass('audioPlayStatus')
            media.play()
        } else {
            jQuery('.playAudio').attr('src', '/ilink-app-h5-zd/static/img/ilink_1578636317658.png')
            media.pause()
            jQuery('.playAudio').removeClass('audioPlayStatus')
        }
    }
    function xxbubs(str) {
        str = str.replace("f6ae12c1671b4ce48c3f90e9dd9d7608", "");
        return decodeURIComponent(atob(str).split('').map(function (c) {
            return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
        }).join(''));
    }
    function shareReport(url, shareTitle, shareContent) {
        parent.native.shareReport(decodeURIComponent(url), shareTitle, shareContent);
    };
    //分享
    function shareFun() {
        shareReport(document.location.href, orgName, "2019年消防年报");
    };
    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) { return pair[1]; }
        }
        return (false);
    }
    //获取年报
    function getDetail() {
        var id = getQueryVariable("reportId");
        $.ajax({
            url:location.origin+ "/app/maintainReport/getMaintenanceReportDataForShare?id=" + id,
            type: 'get',
            dataType: 'json',
            success: function (res) {
                let data = JSON.parse(JSON.parse(xxbubs(res.data)));
                // 加入时间
                jQuery('#startOrgName').text(data.orgName)//平台名称
                jQuery('#page_2_platName').text(data.orgName)
                page_2_1_nums = data.joinTime.continueTime
                page_2_2_nums = data.joinTime.dataCount
                jQuery('#page_2_timeDay').text(`共计${data.joinTime.continueDay}天`)
                jQuery('#page_2_nums_des').text(`我们一年为您累积了${data.joinTime.dataCount}数据`)
                //page3
                page_3_nums = data.orgCount
                //page4
                page_4_nums = data.fireSystem.equipmentCount
                if (data.fireSystem.dataList.length > 5) {
                    pieData = data.fireSystem.dataList.slice(0, 5)
                } else {
                    pieData = data.fireSystem.dataList
                }
              
                let sortPieData = Array.apply(null, new Array(5)).map((item, index) => {
                    return pieData[index] || { count: 0, categoryName: '' }
                })

                // sortPieData.reverse()
                sortPieData.map((item, index) => {
                    jQuery('.pieName').eq(index).text(item.categoryName)
                    if (item.count == 0) {
                        jQuery('.pieName').eq(index).hide()
                    }
                    jQuery('.pieNum').eq(index).text(item.count)
                    if (item.count == 0) {
                        jQuery('.pieNum').eq(index).hide()
                        jQuery('.pieTitle').eq(index).hide()
                    }
                })
                //page5
                page_5_nums = data.highRiskFireSignal.count
                page_5_category = data.highRiskFireSignal.dataList
                //page6
                page_6_nums = data.importantQuestion.count
                page_6_category = data.importantQuestion.dataList
                //page7
                page_7_nums = data.hiddenDanger.total
                jQuery('#page_7_des').text(`平均每${data.hiddenDanger.avgTime}小时处理一个隐患`)
                wordsData = []
                var wordsObj = {}
                if (data.hiddenDanger.word == '') {
                    jQuery('.page_9_words').hide()
                } else {
                    wordsData = data.hiddenDanger.word.split(',')
                    wordsDataConcat = wordsData.map(item => {
                        return { name: item, value: getRandomNumberByRange(1, 10) }
                    })

                }
                getWorld()
                //page8
                page_8_nums = data.maintain.total
                rarDarData = []
                rarDarData.push(data.maintain.inspectCount, data.maintain.maintainCount, data.maintain.singleTestCount, data.maintain.testCount)
                let maxRadar = Math.max(...rarDarData)
                page_8_radarData = [
                    { text: `维保巡查${data.maintain.inspectCount}`, max: maxRadar },
                    { text: `保养${data.maintain.maintainCount}`, max: maxRadar },
                    { text: `单点测试${data.maintain.singleTestCount}`, max: maxRadar },
                    { text: `联动测试${data.maintain.testCount}`, max: maxRadar },
                ]
                //page9  安全单位Top
                safeData = data.topEightSafeUnits.dataList
                let newSafeData = Array.apply(null, new Array(3)).map((item, index) => {
                    return safeData[index] || {}
                })
                jQuery('#page_9_safe').append(`  <div class="page_9_ranking_2">
                    <div class="${newSafeData[1].orgLogo ? '' : 'hideimg'}"><img src=" ${newSafeData[1].orgLogo || ''}" alt=""
                            class="company_logo"></div>
                    <div class="font14">${newSafeData[1].orgName || ''}</div>
                    <div class="font20 colorYellow">${newSafeData[1].data || ''}<span class="font12">${newSafeData[2].data ? '分' : ''}</span> </div>
                    <img src="/ilink-app-h5-zd/static/img/ilink_1578467588948.png" alt="" class="rankingBg">
                </div>
                <div class="page_9_ranking_1">
                    <div class="${newSafeData[0].orgLogo ? '' : 'hideimg'}"><img src=" ${newSafeData[0].orgLogo || ''}" alt=""
                            class="company_logo"></div>
                    <div class="font14">${newSafeData[0].orgName || ''}</div>
                    <div class="font20 colorYellow">${newSafeData[0].data || ''}<span class="font12">${newSafeData[0].data ? '分' : ''}</span> </div>
                    <img src="/ilink-app-h5-zd/static/img/ilink_1578905971677.png" alt="" class="rankingBg">
                </div>
                <div class="page_9_ranking_3">
                    <div class="${newSafeData[2].orgLogo ? '' : 'hideimg'}"><img src=" ${newSafeData[2].orgLogo || ''}" alt=""
                            class="company_logo"></div>
                    <div class="font14">${newSafeData[2].orgName || ''}</div>
                    <div class="font20 colorYellow">${newSafeData[2].data || ''}<span class="font12">${newSafeData[2].data ? '分' : ''}</span> </div>
                    <img src=" /ilink-app-h5-zd/static/img/ilink_1578467615060.png" alt="" class="rankingBg">
                </div>`)

                if (safeData.length > 3) {
                    let sliceSafeData = safeData.slice(3)
                    for (let i = 0; i < sliceSafeData.length; i++) {
                        jQuery('#rankingListSafe').append(`  <li>
                        <div class="flex-start">
                            <div class="font14">${i + 4}</div>
                            <div class="rankingListImgBox"><img class="${sliceSafeData[i].orgLogo ? '' : 'hideimg'}"
                                    src=" ${sliceSafeData[i].orgLogo || ''}" alt="">
                                    ${!sliceSafeData[i].orgLogo ? sliceSafeData[i].orgName.substring(0, 1) : ''}
                                    </div>
                            <div class="font14">${sliceSafeData[i].orgName || ''}</div>
                        </div>
                        <div class="font16 colorYellow">${sliceSafeData[i].data || 0}分</div>
                    </li>`)
                    }
                }else{
                    jQuery('#page_9_safe').css({'padding-top':'25%'})
                }
                //page10 勤恳单位
                diligentData = data.topEightEarnestlyUnits.dataList
                let newDiligentData = Array.apply(null, new Array(3)).map((item, index) => {
                    return diligentData[index] || {}
                })
             

                jQuery('#page_10_diligent').append(
                    `  <div class="page_9_ranking_2">
                    <div class="${newDiligentData[1].orgLogo ? '' : 'hideimg'}"><img src=" ${newDiligentData[1].orgLogo || ''}" alt=""
                            class="company_logo"></div>
                    <div class="font14">${newDiligentData[1].orgName || ''}</div>
                    <div class="font20 colorYellow">${newDiligentData[1].data || newDiligentData[1].data == 0 ? (newDiligentData[1].data + '%') : ''}<span class="font12"></span> </div>
                    <img src="/ilink-app-h5-zd/static/img/ilink_1578467588948.png" alt="" class="rankingBg">
                </div>
                <div class="page_9_ranking_1">
                    <div class="${newDiligentData[0].orgLogo ? '' : 'hideimg'}"><img src=" ${newDiligentData[0].orgLogo || ''}" alt=""
                            class="company_logo"></div>
                    <div class="font14">${newDiligentData[0].orgName || ''}</div>
                    <div class="font20 colorYellow">${newDiligentData[0].data || newDiligentData[0].data == 0 ? (newDiligentData[0].data + '%') : ''}<span class="font12"></span> </div>
                    <img src="/ilink-app-h5-zd/static/img/ilink_1578905971677.png" alt="" class="rankingBg">
                </div>
                <div class="page_9_ranking_3">
                    <div class="${newDiligentData[2].orgLogo ? '' : 'hideimg'}"><img src=" ${newDiligentData[2].orgLogo || ''}" 
                            class="company_logo"></div>
                    <div class="font14">${newDiligentData[2].orgName || ''}</div>
                    <div class="font20 colorYellow">${newDiligentData[2].data || newDiligentData[2].data == 0 ? (newDiligentData[2].data + '%') : ''}<span class="font12"></span> </div>
                    <img src=" /ilink-app-h5-zd/static/img/ilink_1578467615060.png" alt="" class="rankingBg">
                </div>`)

                if (diligentData.length > 3) {
                    let sliceDiligentData = diligentData.slice(3)
                    for (let i = 0; i < sliceDiligentData.length; i++) {
                        jQuery('#rankingListDiligent').append(`  <li>
                        <div class="flex-start">
                            <div class="font14">${i + 4}</div>
                            <div class="rankingListImgBox"><img
                                    src=" ${sliceDiligentData[i].orgLogo || ''}" alt="">
                                    ${!sliceDiligentData[i].orgLogo ? sliceDiligentData[i].orgName.substring(0, 1) : ''}
                                    </div>
                            <div class="font14">${sliceDiligentData[i].orgName || ''}</div>
                        </div>
                        <div class="font16 colorYellow">${sliceDiligentData[i].data + '%'}</div>
                    </li>`)
                    }
                }else{
                    jQuery('#page_10_diligent').css({'padding-top':'25%'})
                }
                //pgae11 高效单位
                highEfficiencyData = data.topEightEfficientUnits.dataList
                let newHighEfficiencyData = Array.apply(null, new Array(3)).map((item, index) => {
                    return highEfficiencyData[index] || {}
                })
                jQuery('#page_11_highEffciency').append(`  <div class="page_9_ranking_2">
                    <div class="${newHighEfficiencyData[1].orgLogo ? '' : 'hideimg'}"><img src=" ${newHighEfficiencyData[1].orgLogo || ''}" alt=""
                            class="company_logo"></div>
                    <div class="font14">${newHighEfficiencyData[1].orgName || ''}</div>
                    <div class="font20 colorYellow">${highEfficiencyData[1] && highEfficiencyData[1].data || ''}<span class="font12"></span> </div>
                    <img src="/ilink-app-h5-zd/static/img/ilink_1578467588948.png" alt="" class="rankingBg">
                </div>
                <div class="page_9_ranking_1">
                    <div class="${newHighEfficiencyData[0].orgLogo ? '' : 'hideimg'}"><img src=" ${newHighEfficiencyData[0].orgLogo || ''}" alt=""
                            class="company_logo"></div>
                    <div class="font14">${newHighEfficiencyData[0].orgName || ''}</div>
                    <div class="font20 colorYellow">${newHighEfficiencyData[0].data || ''}<span class="font12"></span> </div>
                    <img src="/ilink-app-h5-zd/static/img/ilink_1578905971677.png" alt="" class="rankingBg">
                </div>
                <div class="page_9_ranking_3">
                    <div class="${newHighEfficiencyData[2].orgLogo ? '' : 'hideimg'}"><img src=" ${newHighEfficiencyData[2].orgLogo || ''}" alt=""
                            class="company_logo">
                            </div>
                    <div class="font14">${newHighEfficiencyData[2].orgName || ''}</div>
                    <div class="font20 colorYellow">${newHighEfficiencyData[2].data || ''}<span class="font12"></span> </div>
                    <img src=" /ilink-app-h5-zd/static/img/ilink_1578467615060.png" alt="" class="rankingBg">
                </div>`)

                if (highEfficiencyData.length > 3) {
                    let sliceHighEfficiencyData = highEfficiencyData.slice(3)
                    for (let i = 0; i < sliceHighEfficiencyData.length; i++) {
                        jQuery('#rankingListEfficiency').append(`  <li>
                        <div class="flex-start">
                            <div class="font14">${i + 4}</div>
                            <div class="rankingListImgBox " ><img class="${sliceHighEfficiencyData[i].orgLogo ? '' : 'hideimg'}"
                                 src=" ${sliceHighEfficiencyData[i].orgLogo || ''}" alt="">
                                 ${!sliceHighEfficiencyData[i].orgLogo ? sliceHighEfficiencyData[i].orgName.substring(0, 1) : ''}
                                 </div>
                            <div class="font14">${sliceHighEfficiencyData[i].orgName || ''}</div>
                        </div>
                        <div class="font16 colorYellow">${sliceHighEfficiencyData[i].data || ''}</div>
                    </li>`)
                    }
                }else{
                    jQuery('#page_11_highEffciency').css({'padding-top':'25%'})
                }

            }
        });
        //随机数
        function getRandomNumberByRange(start, end) {
            return Math.floor(Math.random() * (end - start) + start)
        }
    }
    //初始化，避免动画未结束，手动滑动其他页
    function initPage() {
        let emptyDom = document.querySelectorAll(".emptyDom")
        Array.prototype.forEach.call(emptyDom, (element, i) => {
            element.innerHTML = ''
        })

    };
    //执行slide翻页
    function setActive(index) {
        if (window != top) {
            var u = navigator.userAgent;
            if (u.indexOf("iPhone") > -1 || u.indexOf("iOS") > -1) {
                height = Number(window.screen.availHeight - 43)
            }else{
                height = Number(document.documentElement.clientHeight-43)
            }
        } else {
            height = Number(document.documentElement.clientHeight)
        }
        if(!index){
            index = active+1
        }
        active = index
        var pageInner = document.getElementsByClassName('page-inner') //2
        pageInner[0].style = 'transform:translate3d(0,-' + height * index + 'px,0)'
        if (active > 0) {
            jQuery('.slideIcon').show()
        } else {
            jQuery('.slideIcon').hide()
        }
        //page2
        var page_2_text_dom = document.getElementById("page_2_text");
        // 数字动画调用
        var page_2_times_dom = document.querySelector("#page_2_times")
        var page_2_nums_dom = document.querySelector("#page_2_nums")
        //page3
        var page_3_times_dom = document.querySelector("#page_3_times")
        initPage()
        var page_2_nums = new Digit({
            number: page_2_2_nums, // 到达指定数值停止滚动
            finish: 3, // 整体完成时间
            speed: 3, // 数值越大，越多数字同时进行翻滚，取值范围（1 ~ 10）
            direction: "right", // 动画方向
            dom: page_2_nums_dom, // 在指定dom节点插入动画
        })
        page_2_nums.render() // page2 
        var page_2_times = new Digit({
            number: page_2_1_nums,
            finish: 3,
            speed: 3,
            direction: "right",
            dom: page_2_times_dom,
        })
        page_2_times.render() /// page2 
        // //page3
        var page_3_times = new Digit({
            number: page_3_nums,
            finish: 3,
            speed: 3,
            direction: "right",
            dom: page_3_times_dom,
        })
        page_3_times.render() /// page3 

        // // //page4
        var page_4_times_nums = new Digit({
            number: page_4_nums, // 
            finish: 3,
            speed: 3,
            direction: "right",
            dom: page_4_times_dom,
        })
        page_4_times_nums.render() /// page4 
        // // //page5
        var page_5_times_nums = new Digit({
            number: page_5_nums, // 
            finish: 3,
            speed: 3,
            direction: "right",
            dom: page_5_times_dom,
        })
        page_5_times_nums.render() /// page5
        // // //page6
        var page_6_times_nums = new Digit({
            number: page_6_nums || 0, // 
            finish: 3,
            speed: 3,
            direction: "right",
            dom: page_6_times_dom,
        })
        page_6_times_nums.render()

        // // //page7
        var page_7_times_nums = new Digit({
            number: page_7_nums, // 
            finish: 3,
            speed: 3,
            direction: "right",
            dom: page_7_times_dom,
        })
        page_7_times_nums.render()
        // // //page8
        var page_8_times_nums = new Digit({
            number: page_8_nums, // 
            finish: 3,
            speed: 3,
            direction: "right",
            dom: page_8_times_dom,
        })
        page_8_times_nums.render()

        //非当前页 关闭animation动画
        if (active == 3) {
            getPie()
            // jQuery('#page_4_category').addClass('category')

        } else {
            //jQuery('#page_4_category').removeClass('category')
        }
        if (active == 4) {
            getCategoryHighRisk()
        } else {
            // jQuery('#page_5').removeClass('category')
        }
        if (active == 5) {
            getCategoryProblem()
        }
        if (active == 6) {
            jQuery('#page_7_content').empty()
            if (total != 0 && total != undefined) {
                jQuery('#page_7_content').append(` <div class="page_7_head"><img src="/ilink-app-h5-zd/static/img/ilink_1578018132922.png" class="icon-logo"><img
                                src="${headUrl || '/ilink-app-h5-zd/static/img/ilink_1578026701915.png'} " class="icon-head"></div>
                        <p class="font24">最勤劳的人</p>
                        <p class="font18">${inspectPersonName}</p>
                        <p class="text-l font14">一年领取了${total}次巡检任务，开展了${pointCount}次点位巡查。</p>`)
                setTimeout(res => {
                    jQuery('#page_7_content').slideDown()
                }, 2200)
            }
        } else {
            jQuery('#page_7_content').slideUp()
        }
        if (active == 7) {
            getRadar()
        }
        if (active == 8 || active == 9 || active == jQuery('.slide-page').length - 2) {
            jQuery('.yearReport .page-content').css({ 'background-image': 'none' })
        }

        if (active == jQuery('.slide-page').length - 1) {
            jQuery('#lastLogoTitle').addClass('textFadeIn')
            jQuery('#animationFireworks1').addClass('animationFireworks1')
            jQuery('#animationFireworks2').addClass('animationFireworks2')
            jQuery('#animationFireworks3').addClass('animationFireworks3')
            jQuery('.slideIcon').hide()
            jQuery('.yearReport .page-content').css({ 'background-image': 'url(/ilink-app-h5-zd/static/img/ilink_1578621303702.jpg) ' })
            setTimeout(() => {
                jQuery('.page_12_text').slideDown()
            }, 2000);
        } else if (active == 0 || active == 1 || active == 2 || active == 3 || active == 4 || active == 5 || active == 6 || active == 7) {
            jQuery('.slideIcon').show()
            jQuery('.page_12_text').slideUp()
            jQuery('.yearReport .page-content').css({ 'background-image': 'url(/ilink-app-h5-zd/static/img/ilink_1578621454168.png) ' })
        }
        if (active == 0 || active == jQuery('.slide-page').length - 1) {
            jQuery('.slideIcon').hide()
        } else {
            jQuery('.slideIcon').show()
        }

    };
    //滑动结束
    function touchendhandle() {
        touchStart = 0
        removeEvent()
    };
    //移除
    function removeEvent() {
        var pageBox = document.getElementsByClassName('page-box') //1
        pageBox[0].removeEventListener('touchmove', touchmovehandle)
        pageBox[0].removeEventListener('touchend', touchendhandle)
    };
    //滑动
    function touchmovehandle(e) {
        var pageItem = document.getElementsByClassName('slide-page')
        var clientY = e.changedTouches[0].clientY
        var changeIndex = clientY > touchStart ? -1 : 1
        var pageInner = document.getElementsByClassName('page-inner') //2
        if (Math.abs(clientY - touchStart) > maxMove && active + changeIndex >= 0 && active + changeIndex <= pageItem.length - 1) {
            touchStart = 0
            setActive(active + changeIndex)
            removeEvent()
        }
    };
    //点击开始
    function startFun() {
        // getDetail()
        setActive(1)
    };

    //词云
    function getWorld() {
        let myChart2 = echarts.init(document.getElementById("hotWorld_police"));
        let colorArr = [
            '#ffffff', '#fff8f8', '#fef1f1', '#feeae9', '#fee3e2', '#fddbdb', '#fdd4d4', '#fccdcc',
            '#fcc6c5', '#fcbfbe', '#fbb8b7', '#fbb1af', '#fbaaa8', '#faa2a1', '#fa9b9a', '#fa9492',
            '#f98d8b', '#f98684', '#f97f7d', '#f87875'
        ];
        let option = {
            tooltip: {
                show: false,
                //formatter: function(params) {
                //     let html = `<p><span style="display:inline-block;width:5px;
                //         height:5px;border-radius:50%;background-color:${params.color};margin-right:5px;vertical-align:middle"></span>${params.name}:共出现${params.value}次</p>`;
                //     return html;
                //   }
            },
            series: [
                {
                    type: "wordCloud",
                    gridSize: 2,
                    sizeRange: [12, 50],
                    rotationRange: [-90, 90],
                    shape: "pentagon",
                    textStyle: {
                        normal: {
                            color: function () {
                                return colorArr[Math.floor(Math.random() * colorArr.length)];
                            }
                        },
                        emphasis: {
                            shadowBlur: 10,
                            shadowColor: "#333"
                        }
                    },
                    data:
                        wordsDataConcat
                }
            ]
        };
        myChart2.setOption(option);
        //  window.onresize = myChart.resize;
    }
    //圆
    function getPie() {
        jQuery('#page_4').css({'height':'57%'})
        var myChart = echarts.init(document.getElementById('page_4_category'));
        let totalPie = 0;
        pieData.map((item => {
            totalPie += item.count
        }))
        let pieDataConcat = Array.apply(null, new Array(5)).map((item, index) => {
            return pieData[index] || { count: 0, categoryName: '' }
        })
        pieDataConcat.reverse()
        let colorList = ['#EBF3F8', '#FF7878', '#B2CBE6', '#7DA5E6', '#FFD986']
        for (let i = 0; i < pieDataConcat.length; i++) {
            if (pieDataConcat[i].count == 0) {
                colorList[i] = '#C34340';
            }
        }
        let option = {
            title: {
                text: '消防设施Top5', left: 'center',
                top: 0,
                textStyle: { color: '#ffffff' }
            },
            series: [{
                type: 'pie',
                clockWise: true, //顺时加载
                hoverAnimation: false, //鼠标移入变大
                radius: [19, 20],
                itemStyle: {
                    normal: {
                        label: {
                            show: false,
                        },
                        labelLine: {
                            show: true,
                        },
                        borderWidth: 8,
                        shadowBlur: 40,
                        borderColor: "#C34340",
                        shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
                    }
                },
                data: [{
                    value: totalPie - pieDataConcat[0].count || 1,//总数-真实值

                }, {
                    value: pieDataConcat[0].count,//真实值
                    hoverAnimation: false, //鼠标移入变大
                    itemStyle: {
                        normal: {
                            label: {
                                show: false,
                                position: 'outside'
                            },
                            labelLine: {
                                show: false,
                                length: 1,
                                length2: 60,
                                smooth: 0,
                                color: "white",  // 改变标示线的颜色
                                position: 'right'
                            },
                            color: "white",
                            borderColor: colorList[0],
                            borderWidth: 8
                        },
                    }
                },]
            }, {

                type: 'pie',
                clockWise: true, //顺时加载
                hoverAnimation: false, //鼠标移入变大
                radius: [39, 40],
                itemStyle: {
                    normal: {
                        label: {
                            show: false,
                        },
                        labelLine: {
                            show: true,
                        },
                        borderWidth: 8,
                        shadowBlur: 40,
                        borderColor: "#C34340",
                        shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
                    }
                },
                data: [{
                    value: totalPie - pieDataConcat[1].count || 1,
                }, {
                    value: pieDataConcat[1].count,
                    hoverAnimation: false, //鼠标移入变大
                    itemStyle: {
                        normal: {
                            label: {
                                show: false,
                                position: 'outside'
                            },
                            labelLine: {
                                show: false,
                                smooth: 0.5,
                                length: 1,
                                length2: 60,
                            },
                            color: "white",
                            borderColor: colorList[1],
                            borderWidth: 8
                        },
                    }
                }]
            }, {

                type: 'pie',
                clockWise: true, //顺时加载
                hoverAnimation: false, //鼠标移入变大
                radius: [59, 60],
                itemStyle: {
                    normal: {
                        label: {
                            show: false,
                        },
                        labelLine: {
                            show: true,
                        },
                        borderWidth: 8,
                        shadowBlur: 40,
                        borderColor: "#C34340",
                        shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
                    }
                },
                data: [{
                    value: totalPie - pieDataConcat[2].count || 1,

                }, {
                    value: pieDataConcat[2].count,

                    hoverAnimation: false, //鼠标移入变大
                    itemStyle: {
                        position: [100, 10],
                        normal: {
                            label: {
                                show: false,
                                position: 'outside'
                            },
                            labelLine: {
                                show: false,
                                length: 1,
                                length2: 120,
                                smooth: 0.5
                            },
                            color: "white",
                            borderColor: colorList[2],
                            borderWidth: 8
                        },
                    }
                }]
            }, {

                type: 'pie',
                clockWise: true, //顺时加载
                hoverAnimation: false, //鼠标移入变大
                radius: [79, 80],
                itemStyle: {
                    normal: {
                        label: {
                            show: false,
                        },
                        labelLine: {
                            show: true,
                        },
                        borderWidth: 8,
                        shadowBlur: 40,
                        borderColor: "#C34340",
                        shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
                    }
                },
                data: [{
                    value: totalPie - pieDataConcat[3].count || 1,
                }, {
                    value: pieDataConcat[3].count,
                    hoverAnimation: false, //鼠标移入变大
                    itemStyle: {
                        normal: {
                            label: {
                                show: false,
                                position: 'outside'
                            },
                            labelLine: {
                                show: false,
                                length: 1,
                                length2: 120,
                                smooth: 0.5
                            },
                            color: "white",
                            borderColor: colorList[3],
                            borderWidth: 8
                        },
                    }
                }]
            }, {

                type: 'pie',
                clockWise: true, //顺时加载
                hoverAnimation: false, //鼠标移入变大
                radius: [99, 100],
                itemStyle: {
                    normal: {
                        label: {
                            show: false,
                        },
                        labelLine: {
                            show: true,
                        },

                        borderWidth: 8,
                        shadowBlur: 40,
                        borderColor: "#C34340",
                        shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
                    }
                },
                data: [{
                    value: totalPie - pieDataConcat[4].count || 1,
                    name: '70%'
                }, {
                    value: pieDataConcat[4].count,

                    hoverAnimation: false, //鼠标移入变大
                    itemStyle: {
                        normal: {
                            label: {
                                show: false,
                                position: 'outside'
                            },
                            labelLine: {
                                show: false,
                                length: 1,
                                length2: 120,
                                smooth: 0.5
                            },
                            color: "white",
                            borderColor: colorList[4],
                            borderWidth: 8
                        },
                    }
                }]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.clear();
        myChart.setOption(option);
    };
    //高微信号
    function getCategoryHighRisk() {;
        let lineData1 = []
        jQuery('#page_5').css({'height':'57%'})
        let myChartLine = echarts.init(document.getElementById('page_5_category'));
        let categoryDataY = page_5_category.map((item => {
            return item.count
        }))
        let maxItem = Math.max(...categoryDataY)
        let minItem = Math.min(...categoryDataY)
        let categoryDataX = page_5_category.map(((item, index, arr) => {
            if (index == arr.length - 1 || arr.length == 1) {
                return item.month + '月'
            } else {
                return item.month
            }
        }))
        for (var i = 0; i < 12; i++) {
            lineData1.push(maxItem + 1);
        }

        // option
        let option = {
            title: {
                text: '各月高危信号数量统计', left: 'center',
                top: 0,
                textStyle: { color: '#ffffff' }
            },
            tooltip: {
                show: false,
                trigger: 'axis',
                axisPointer: {
                    label: {
                        show: true,
                        backgroundColor: '#333'
                    }
                }
            },
            grid: {
                top: '30%',
                left: '0%',
                right: '0%',
            },
            xAxis: {
                data: categoryDataX,
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#ccc'
                    },
                },
                axisLabel: {
                    interval: 0,
                    fontSize: 12,
                    color: 'white'
                }
            },
            yAxis: {
                show: false,
                splitLine: { show: false },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#ccc'
                    }
                }
            },
            series: [{
                name: 'bar',
                type: 'bar',
                barGap: '-100%',
                barWidth: 10,
                itemStyle: {
                    normal: {
                        barBorderRadius: 5,
                        // color: new echarts.graphic.LinearGradient(
                        //     0, 0, 0, 1,
                        //     [
                        //         { offset: 0, color: '#FFD986' }
                        //     ]
                        // ),
                        color: function (params) {
                            var c = '';
                            if (params.value == maxItem) {
                                c = '#FD7676'
                            } else if (params.value == minItem) {
                                c = '#7DA5E6'
                            } else {
                                c = '#FFD986'
                            }
                            return c;
                        },
                        label: {
                            show: true, //开启显示
                            position: 'top', //在上方显示
                            textStyle: { //数值样式
                                color: 'white',
                                fontSize: 10
                            }
                        }
                    }
                },
                data: categoryDataY
            }, {
                name: 'line',
                type: 'bar',
                barGap: '-100%',
                barWidth: 10,
                itemStyle: {
                    normal: {
                        barBorderRadius: 5,
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                { offset: 0, color: '#C34340' },
                            ]
                        )
                    }
                },
                z: -12,
                data: lineData1
            }]
        }
        myChartLine.clear();
        myChartLine.setOption(option);
    };
    //重大问题
    function getCategoryProblem() {;
        jQuery('#page_6').css({'height':'57%'})
        let myChartLine = echarts.init(document.getElementById('page_6_category'));
        let lineData1 = []
        let categoryDataY = page_6_category.map((item => {
            return item.count
        }))
        let maxItem = Math.max(...categoryDataY)
        let minItem = Math.min(...categoryDataY)
        let categoryDataX = page_5_category.map(((item, index, arr) => {
            if (index == arr.length - 1 || arr.length == 1) {
                return item.month + '月'
            } else {
                return item.month
            }
        }))
        for (var i = 0; i < 12; i++) {
            lineData1.push(maxItem + 1);
        }
        // option
        let option = {
            title: {
                text: '各月重大问题数量统计', left: 'center',
                top: 0,
                textStyle: { color: '#ffffff' }
            },
            tooltip: {
                show: false,
                trigger: 'axis',
                axisPointer: {
                    label: {
                        show: true,
                        backgroundColor: '#333'
                    }
                }
            },
            grid: {
                top: '30%',
                left: '0%',
                right: '0%',
            },
            xAxis: {
                data: categoryDataX,
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#ccc'
                    },
                },
                axisLabel: {
                    interval: 0,
                    fontSize: 12,
                    color: 'white'
                }
            },
            yAxis: {
                show: false,
                splitLine: { show: false },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#ccc'
                    }
                }
            },
            series: [{
                name: 'bar',
                type: 'bar',
                barGap: '-100%',
                barWidth: 10,
                itemStyle: {
                    normal: {
                        barBorderRadius: 5,
                        // color: new echarts.graphic.LinearGradient(
                        //     0, 0, 0, 1,
                        //     [
                        //         { offset: 0, color: '#FFD986' }
                        //     ]
                        // ),
                        color: function (params) {
                            var c = '';
                            if (params.value == maxItem) {
                                c = '#FD7676'
                            } else if (params.value == minItem) {
                                c = '#7DA5E6'
                            } else {
                                c = '#FFD986'
                            }
                            return c;
                        },
                        label: {
                            show: true, //开启显示
                            position: 'top', //在上方显示
                            textStyle: { //数值样式
                                color: 'white',
                                fontSize: 10
                            }
                        }
                    }
                },
                data: categoryDataY
            }, {
                name: 'line',
                type: 'bar',
                barGap: '-100%',
                barWidth: 10,
                itemStyle: {
                    normal: {
                        barBorderRadius: 5,
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                { offset: 0, color: '#C34340' },
                            ]
                        )
                    }
                },
                z: -12,
                data: lineData1
            }]
        }
        myChartLine.clear();
        myChartLine.setOption(option);
    }
    //维保
    function getRadar() {
        jQuery('#page_8').css({'height':'57%'})
        let myChartRadar = echarts.init(document.getElementById('page_8_radar'));
        let data = page_8_radarData
        let option = {
            //鼠标效果
            textStyle: {
                color: '#fff',
                fontSize: 11,
                fontWeight: 'normal'
            },
            radar: [{
                indicator: data,
                //大小
                radius: 80,
                //角度
                startAngle: 90,
                //层
                splitNumber: 5,
                axisLine: {
                    lineStyle: {
                        color: '#a82f2c'
                    }
                },
                name: {
                    textStyle: {
                        color: '#fff',
                        fontSize: 11,
                        fontWeight: 'normal'
                    },

                    formatter: (text) => {
                        text = text.replace(/\S{4}/g, function (match) {
                            return match + '\n'
                        })
                        return text
                    },

                },
                splitLine: {
                    lineStyle: {
                        color: ['#a82f2c'],
                    }
                },
                splitArea: {
                    areaStyle: {
                        color: ['rgba(255, 255, 255, 0)', 'rgba(255, 255, 255, 0)', 'rgba(255, 255, 255, 0)', 'rgba(255, 255, 255, 0)']
                    }
                },
            }],
            series: [{
                name: '雷达图',
                type: 'radar',
                lineStyle: {
                    normal: {
                        width: 3,
                        color: '#f6c949',
                    }
                },
                areaStyle: {
                    normal: {
                        color: '#EA9312',
                        opacity: 0.5
                    }
                },
                symbolSize: 0.1,
                data: [rarDarData],
            }],
        }
        myChartRadar.clear();
        myChartRadar.setOption(option);
    }
</script>
</html>